<template>
<div class="container">
    <div class="page-head">
        <div class="left">
            <el-form :model="query" :inline="true" @submit.native.prevent>
                <el-form-item>
                    <el-button class="filter-item" style="margin-left: 10px" type="primary" icon="el-icon-plus" @click="showAddView">添加</el-button>
                </el-form-item>
                <el-form-item>
                    <el-input class="filter-item" style="width: 200px" v-model="query.keyword" placeholder="门店名称" clearable @clear="doSearch" />
                </el-form-item>
                <el-form-item>
                    <el-button class="filter-item" type="primary" icon="el-icon-search" native-type="submit" @click="doSearch">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <el-table ref="tableView" height="tableHeight" class="page-body" :data="tableData" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column label="ID" align="center" width="95">
            <template slot-scope="scope">
                {{ scope.row.id }}
            </template>
        </el-table-column>
        <el-table-column label="门店名称">
            <template slot-scope="scope">
                {{ scope.row.title }}
            </template>
        </el-table-column>
        <el-table-column label="门店图片" width="120" align="center">
            <template slot-scope="scope">
                <el-image :src="scope.row.titlepic" class="image-size" :preview-src-list="[scope.row.titlepic]"></el-image>
            </template>
        </el-table-column>
        <el-table-column label="门店标签">
            <template slot-scope="scope">
                <div class="tag-group">
                    <el-tag type="info" v-for="tag in scope.row.tags" :key="tag">{{ tag }}</el-tag>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="门店地址" prop="address" align="left" width="220px" show-overflow-tooltip></el-table-column>
        <el-table-column label="厅" prop="halls" width="100px" align="center"></el-table-column>
        <el-table-column label="排序" prop="sort" width="100px" align="center"></el-table-column>
        <el-table-column label="状态" prop="sort" width="100px" align="center">
            <template slot-scope="scope">
                {{ scope.row.status == 1 ? "营业" : scope.row.status == 0 ? "关闭" : "歇业" }}
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="280px">
            <template slot-scope="scope">
                <el-button type="success" size="mini" @click="showDetailView(scope.row)">详情</el-button>
                <el-button type="primary" size="mini" @click="showEditView(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="deleteRow(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="page-foot">
        <div class="left"></div>
        <div class="right">
            <common-pagination :total="pg.total" :page.sync="pg.page" :limit.sync="pg.limit" @getList="getTableData"></common-pagination>
        </div>
    </div>

    <edit-view ref="editView" @getTableData="getTableData"></edit-view>
    <detail-view ref="detailView"></detail-view>
</div>
</template>

<script>
import {
    getTableDataApi,
    deleteStoreApi
} from "@/api/system/dictionary/store";

import pagination from "@/components/mixins/pagination.vue";
import editView from "./edit.vue";
import detailView from "./detail.vue";

export default {
    components: {
        editView,
        detailView
    },

    mixins: [pagination],
    mixins: [pagination],
    data() {
        return {
            query: {
                keyword: "",
            },
            tableData: []
        };
    },
    created() {
        this.getTableData();
    },
    methods: {
        doSearch() {
            this.resetPg();
            this.getTableData();
        },
        getTableData() {

            let params = Object.assign({}, this.query);
            params["pagination"] = this.pg;

            getTableDataApi(params).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.list;
                    this.setPg(res);
                } else {
                    this.$message.warning(res.msg);
                }
            });
        },
        // 添加渠道
        showAddView() {
            if (this.$refs["editView"] != undefined) {
                this.$refs["editView"].showAddView();
            } else {
                this.$nextTick(function () {
                    this.$refs["editView"].showAddView();
                });
            }
        },
        showEditView(row) {
            this.$nextTick(function () {
                this.$refs["editView"].showSaveView(row);
            });
        },
        showDetailView(row) {
            this.$nextTick(function () {
                this.$refs["detailView"].showDetailView(row);
            });
        },
        deleteRow(row) {
            this.$confirm("确认删除该条信息?", "警告", {
                    type: "warning",
                })
                .then((res) => {
                    deleteStoreApi(row)
                        .then((res) => {
                            if (res.code == 200) {
                                this.getTableData();
                                this.$message.success(res.msg);
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((res) => {
                            this.$message.info("系统异常，请联系管理员");
                        });
                })
                .catch((res) => {
                    this.$message.info("您取消了删除操作");
                });
        },
        //厅
        showRoomView(query) {
            this.$router.push({
                path: "/system/dictionary/store/room",
                query: {
                    storeId: query.id
                },
            });
        },
        showPackageView(query) {
            this.$router.push({
                path: "/system/dictionary/store/package",
                query: {
                    storeId: query.id
                },
            });
        },
    },
};
</script>

<style lang="less" scoped>
.image-size {
    width: 50px;
    height: 50px;
    object-fit: cover;
}
</style>
